<template>
  <div>
    <div class="item-box">
      <div class="img-box">
        <img v-if="index == 0" :src="indexImg1" class="num-img" />
        <img v-else-if="index == 1" :src="indexImg2" class="num-img" />
        <img v-else-if="index == 2" :src="indexImg3" class="num-img" />
        <div v-else class="num-txt">{{ index + 1 }}</div>
      </div>
      <div class="pic-box">
        <t-image :src="item.course.titleImg" class="pic" />
      </div>
      <div class="info-box">
        <div class="name-box">
          <div class="name">{{ item.course.title }}</div>
          <div class="hot">{{ item.course.lastDetailsNameV }}</div>
        </div>
        <div class="desc">{{ item.course.classify }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import indexImg1 from "@/assets/rank/icon-1.png";
import indexImg2 from "@/assets/rank/icon-2.png";
import indexImg3 from "@/assets/rank/icon-3.png";
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  index: {
    type: Number,
    default: 0,
  },
});
</script>
<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
  .img-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .num-img {
    width: 15px;
    height: 20px;
    display: block;
  }
  .num-txt {
    width: 15px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    font-weight: 600;
  }
  .pic-box {
    padding: 0 6px;
    .pic {
      width: 43px;
      height: 60px;
      border-radius: 6px;
    }
  }
  .info-box {
    flex: 1;
    .name-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 13px;
      line-height: 1;
      .name {
        flex: 1;
        text-align: left;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 0;
        color: #101010;
      }
      .hot {
        font-size: 13px;
        color: #ff5959;
      }
    }
    .desc {
      text-align: left;
      font-size: 11px;
      color: #999;
    }
  }
}
</style>
